<template>
  <view class="mask" @click="dimiss">
    <!-- 阻止子元素事件向父元素冒泡 -->
    <view class="display-default popup-body" @click.stop="!dimiss">
      <text class="popup-title" :style="titleStyle ? titleStyle : 'color: #7a7a7a'">{{title}}</text>
      <view class="display-default" style="width: 100%;">
        <button class="display-default button-toLogin" @click="buttonConfirm"
          v-text="confirmText ? confirmText : '确定'">去登陆</button>
        <button class="display-default button-cancel" @click="buttonCancel"
          v-text="cancelText ? cancelText : '取消'">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 标题
        title: '',
        // 标题自定义样式
        titleStyle: '',
        // 确认按钮的文字，默认确定
        confirmText: '',
        // 取消按钮的文字，默认取消
        cancelText: '',
        // 页面跳转标识
        type: '',
        // 页面跳转携带的参数
        data: {}
      }
    },
    onLoad(e) {
      this.title = e.title || ''
      this.titleStyle = e.titleStyle || ''
      this.confirmText = e.confirmText || ''
      this.cancelText = e.cancelText || ''
      this.type = e.type || ''

      // 检测到上一页面为删除话题页
      if (this.type == 'delPress') {
        this.data.pressId = e.pressId
      }
      // 检测到上一页面为删除评论页
      if (this.type == 'delComment') {
        this.data.commentId = e.commentId
      }
    },
    methods: {
      //点击mask消失，由于是页面实际相当于返回
      dimiss() {
        console.log("点击mask消失");
        uni.navigateBack()
      },
      // 对话框，是
      async buttonConfirm(e) {
        // 该功能需要登陆后使用，是否登陆？
        if (this.type == 'login') {
          uni.redirectTo({
            url: `/pages/loginView/loginView`
          })
          return
        }

        // 确认登出
        if (this.type == 'loginOut') {
          uni.removeStorageSync('token')
          uni.redirectTo({
            url: `/pages/loginView/loginView`
          })
          return
        }

        // 返回页面
        if (this.type == 'backPage') {
          uni.navigateBack({
            delta: 2
          })
          return
        }

        // 删除咨询
        if (this.type == 'delPress') {
          uni.showLoading({
            title: '删除中...',
            mask: true
          });

          console.log("this.data.pressId: ", this.data.pressId);
          await this.$http.user.delPressInfoByPressIdAndUid(uni.getStorageSync('token'), this.data.pressId).then(
            res => {
              console.log("res: " + JSON.stringify(res));
              if (res.code == 401) {
                return uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'center'
                })
              } else if (!res.code) {
                return uni.showToast({
                  title: '服务器开小差了',
                  icon: 'none',
                  position: 'center'
                });
              }

              if (res.code == 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none',
                  position: 'center'
                })
              }
            }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

          // 设置返回消息体
          uni.setStorageSync('isMyPublishViewBack', true)
          // 返回上一页面
          uni.navigateBack({
            delta: 1
          })

          uni.hideLoading()
          return
        }

        // 删除咨询
        if (this.type == 'delComment') {
          uni.showLoading({
            title: '删除中...',
            mask: true
          });

          console.log("this.data.pressId: ", this.data.commentId);
          await this.$http.user.delCommentInfoByCommentIdAndUid(uni.getStorageSync('token'), this.data.commentId)
            .then(
              res => {
                console.log("res: " + JSON.stringify(res));
                if (res.code == 401) {
                  return uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    position: 'center'
                  })
                } else if (!res.code) {
                  return uni.showToast({
                    title: '服务器开小差了',
                    icon: 'none',
                    position: 'center'
                  });
                }

                if (res.code == 200) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'none',
                    position: 'center'
                  })
                }
              }).catch(err => {
              console.log("err: " + JSON.stringify(err));
            })

          // 设置返回消息体
          uni.setStorageSync('isMyCommentViewBack', true)
          // 返回上一页面
          uni.navigateBack({
            delta: 1
          })

          uni.hideLoading()
          return
        }

        // 清空历史记录
        if (this.type == 'delPressHistoryBrowsing') {
          // 设置返回消息体
          uni.setStorageSync('isMyHistoryBrowsingBack', true)

          // 清空历史记录
          uni.removeStorageSync(uni.getStorageSync('token') + 'pressList') // 清空历史记录

          // 返回上一页面
          uni.navigateBack({
            delta: 1
          })
          return
        }
      },
      // 对话框，否 
      // 实际相当于返回
      buttonCancel() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .mask {
    position: relative;
    width: 100%;
    height: 100%;

    .popup-body {
      background: white;
      border-radius: 30rpx;
      width: 600rpx;
      height: 300rpx;
      position: absolute;
      // 中间居中
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      // 内部元素竖向布局，并上下等边居中
      flex-direction: column;
      justify-content: space-around;

      & .popup-title {
        margin-top: 30rpx;
      }

      & .button-toLogin {
        background: #000;
        color: #fff;
        font-size: 15px;
        width: 42%;
        margin: 0;
        margin-right: 20rpx;
      }

      & .button-cancel {
        background: #f3f3f3;
        color: #7a7a7a;
        font-size: 15px;
        width: 42%;
        margin: 0;
        z-index: 2;
      }
    }
  }
</style>
